<template>
  <div>
    <div id="echarts_1" style="width: 100%; height: 110px" ref="echartsOne"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "echartsOne",
  data() {
    return {
      sortList: [],
    };
  },
  mounted() {
    this.getAlermTypeNum(); 
  },
  methods: {
    echartsOne() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.echartsOne);

      var data = this.sortList;

      var option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}: <br/>{c} ({d}%)",
        },
        color: ["#20b9cf", "#2089cf", "#205bcf"],
        legend: {
          //图例组件，颜色和名字
          x: "70%",
          y: "center",
          orient: "vertical",
          itemGap: 12, //图例每项之间的间隔
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          // data: ['行业一', '行业二', '行业三'],
          textStyle: {
            color: [],
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "行业占比",
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [40, 60], //饼图的半径
            //  avoidLabelOverlap: true, ////是否启用防止标签重叠
            itemStyle: {
              //图形样式
              // normal:{
              borderColor: "transparent",
              borderWidth: 2,
              // }
            },
            label: {
              //标签的位置
              // normal: {
              show: true,
              position: "inside", //标签的位置
              formatter: "{d}%",
              textStyle: {
                color: "#fff",
                // }
              },
              // emphasis: {
              show: true,
              // textStyle: {
              fontWeight: "bold",
              // }
              // }
            },
            data: data,
          },
          {
            name: "",
            type: "pie",
            clockwise: false,
            silent: true,
            minAngle: 20, //最小的扇区角度（0 ~ 360）
            center: ["35%", "50%"], //饼图的中心（圆心）坐标
            radius: [0, 40], //饼图的半径
            itemStyle: {
              //图形样式
              // normal: {
              borderColor: "#1e2239",
              borderWidth: 1.5,
              opacity: 0.21,
              // }
            },
            label: {
              //标签的位置
              // normal: {
              show: false,
              // }
            },
            data: data,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    // 交流直流电个数
    async getAlermTypeNum() {
      let result = await this.$API.reqSelectAlermTypeNum();
      console.log("result---", result);
      // this.sortList =
      for (let i = 0; i < result.length; i++) {
        this.sortList.push({
          name: result[i].police_content,
          value: result[i].alarm_num,
        });
      }
      this.echartsOne();
    },
  },
};
</script>
